<template>
	<view >
		<navSearchBar title="筛选" ></navSearchBar>
		<scroll-view class="select-field">
			<!-- <view class="select-item">
				<view class="title">列表排序</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in sortData" :key="index" class="text-body text-body-3" :class="[activeHandle(item,'SORT')?'active-style':'']" @click="selectSearch(item,'SORT')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">客户等级</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in levelData" :key="index" class="text-body" :class="[activeHandle(item,'LEVEL')?'active-style':'']" @click="selectSearch(item,'LEVEL')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item" v-if="searchData['demand_year'] !== ''">
				<view class="title">客户行业</view>
				<view class="select-item-body-area-type">
					<view v-for="(item,index) in industryDisplayData" :key="index" class="text-body" :class="[index==0?'text-body-3':'area-type',activeHandle(item,'INDUSTRY')?'active-style':'']" @click="selectSearch(item,'INDUSTRY')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">需求类型</view>
				<view class="select-item-body-area-type">
					<view v-for="(item,index) in baseTypeDisplayData" :key="index" class="text-body" :class="[index==0?'text-body-3':'area-type',activeHandle(item,'TYPE')?'active-style':'']" @click="selectSearch(item,'TYPE')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
		
			<view class="select-item">
				<view class="title">最后追踪</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in traceTimeData" :key="index" class="text-body text-body-3" :class="[activeHandle(item,'TRACE_TIME')?'active-style':'']" @click="selectSearch(item,'TRACE_TIME')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view> -->
			
			<view class="select-item">
				<view class="title">信息完善度</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in integrityScoreData" :key="index" class="text-body text-body-3" :class="[activeHandle(item,'INTEGRITY_SCORE')?'active-style':'']" @click="selectSearch(item,'INTEGRITY_SCORE')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="select-item">
				<view class="title">小程序权限</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in authData" :key="index" class="text-body text-body-3" :class="[activeHandle(item,'AUTH')?'active-style':'']" @click="selectSearch(item,'AUTH')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="select-item">
				<view class="title">客户归属人</view>
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in clientPersonData" :key="index" class="text-body text-body-3" :class="[activeHandle(item,'CLIENT_PERSON')?'active-style':'']" @click="selectSearch(item,'CLIENT_PERSON')">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view> -->
			
			<view class="footer">
				<tn-button fontBold fontSize="32" backgroundColor="#FFA457" fontColor="#FFFFFF" width="442rpx" height="72rpx" @click="comfireSearch">确定筛选</tn-button>
				<tn-button class="right-button" margin="0 0 0 20rpx" fontSize="24" border  backgroundColor="#F7F8FC" fontColor="#000000" width="230rpx" height="72rpx" @click="cancel">清空条件</tn-button>
			</view>
		</scroll-view>
		
	<tn-picker safeAreaInsetBottom mode="selector" v-model="typeShow"  :range="baseTypeList" rangeKey="text" :defaultSelector="initTypeData" @confirm="typeConfirm"></tn-picker>
	<tn-picker safeAreaInsetBottom mode="multiSelector" v-model="industyShow"  :range="industryData" rangeKey="title" :defaultSelector="initIndustyData" @columnchange="industyColumnchange" @confirm="industyConfirm"></tn-picker>
	</view>
</template>

<script>
	const SORT = 'SORT';
	const BASETYPE = 'TYPE';
	const LEVEL = 'LEVEL';
	const INDUSTRY = 'INDUSTRY';
	const TRACE_TIME = 'TRACE_TIME';
	const INTEGRITY_SCORE = 'INTEGRITY_SCORE';
	const CLIENT_PERSON = 'CLIENT_PERSON';
	const AUTH = 'AUTH';
	export default {
		data() {
			return {
				sortData:[{text:'默认排序',value:''},{text:'等级最高',value:1},{text:'规模最大',value:2},{text:'完整度最高',value:3}],
				searchData:{
					// order:'',
					// user_id:'',
					// industry_id:'',
					// level:'',
					// demand__demand_type:'',
					integrity_score:'',
					// trace_time:'',
					access_authority:''
				},
				typeShow:false,
				initTypeData:[0],
				baseTypeList:[],
				baseTypeDisplayData:[{text:'不限',value:''},{text:'选择需求类型',value:1}],
				levelData:[],
				industryDisplayData:[{text:'不限',value:''},{text:'选择行业',value:1}],
				integrityScoreData:[],
				authData:[{text:'不限',value:''},{text:'已开通',value:1},{text:'未开通',value:2},],
				maskVisible:false,
				personNum:'',
				negativeTop:0,
				// areaData:[[{ title: "不限", id:''}],[{ title: "不限", id:''}],[{ title: "不限", id:''}]],
				// initAreaData:[0,0,0],
				// areaShow:false,
				industyShow:false,
				initIndustyData:[0,0],
				industryData:[[{ title: "不限", id:""}],[{ title: "不限", id:""}]],
				traceTimeData:[],
				clientPersonData:[],
				// startTime:'',
				// endTime:'',
				// timeRangeData:[],
				// timeShow:false,
				// endTimeShow:false,
				// endTimeRangeData:[],
				// initStartTime:[],
				// initEndTime:[],
				// customTimeText:'自定义选择日期'
			}
		},
		onLoad(){
			console.log('onLoadfilter',this.$Route.query)
			const {searchData} = this.$Route.query;
			
			
			
			this.searchData = searchData;
			if(this.searchData['demandTypeText']){
				this.baseTypeDisplayData[1].text = this.searchData['demandTypeText'];
			}
			if(this.searchData['industryText']){
				this.industryDisplayData[1].text = this.searchData['industryText'];
			}
			
			
			this.getBaseTypeList();
			this.getIndustyData(0,0,true);
			this.getLevelData();
			this.getIntegrityScoreData();
			this.getClientPersonData();
			this.getTraceTimeData();
			uni.onKeyboardHeightChange(res => {
			  console.log('高度uuuuuu',res.height)
			})
			// this.getAreaList(0);
		},
		methods: {
			typeConfirm(data){
				
				let type = this.baseTypeList[data[0]];
				console.log('typeConfirm',data,type)
				this.searchData['demand__demand_type'] = type.value;
				this.baseTypeDisplayData[1].text = type.text;
				this.baseTypeDisplayData[1].value = type.value;
				this.searchData['demandTypeText'] = type.text;
			},
			industyConfirm(data){
				let proviceData = this.industryData[0][data[0]];
				let cityData = this.industryData[1][data[1]];
				
				this.searchData['industry_id'] = proviceData.id;
				this.searchData['industry_detail_id'] = cityData.id;
				this.industryDisplayData[1].text = proviceData.title+'/'+cityData.title;
				this.searchData['industryText'] = proviceData.title+'/'+cityData.title;
				
			},
			industyColumnchange({column, index}){
				let parentId = this.industryData[column][index].id;
				if(column < 1){
					this.getIndustyData(parentId, column+1);
				}
				this.$set(this.initIndustyData,column,index);
			},
			getLevelData(type){
				this.$http.get('/api/dictionary/data',{title:'client_level'}).then((res) => {
					if(res.data.status == 200) {
						this.levelData = JSON.parse(JSON.stringify(res.data.data||[]));
						this.levelData.map((el) => el.text = el.value+'级')
						this.levelData.unshift({text:'不限',value:''});
						// this.cateringCapacityData.push({text:'自定义',value:'custom',type:'custom'});
						
						
					}
				})
			},
			getIndustyData(parentId,column=0,init){
				this.$http.get('/api/industry/select',{parent_id:parentId}).then((res) => {
					if(res.data.status == 200) {
						let data = res.data.data||[];
						// data.unshift({ title: "不限", id:''});//不用了
						this.$set(this.industryData,column,data)
						console.log('ccccccccc',this.industryData)
						if(init){
							this.getIndustyData(data[0].id, 1);
						}
						
					} else {
						
					}
					
				})
			},
			getIntegrityScoreData(){
				this.$http.get('/api/dictionary/data',{title:'complete_level'}).then((res) => {
					if(res.data.status == 200) {
						this.integrityScoreData = res.data.data||[];
						this.integrityScoreData.unshift({text:'不限',value:''});
						
					}
				})
			},
			getClientPersonData(){
				this.$http.get('/api/user/select').then((res) => {
					if(res.data.status == 200) {
						this.clientPersonData = res.data.data||[];
						this.clientPersonData.map((el) => {el.text = el.nickname;el.value = el.id})
						this.clientPersonData.unshift({text:'不限',value:''});
						
					}
				})
			},
			getTraceTimeData(){
				this.$http.get('/api/dictionary/data',{title:'trace_time'}).then((res) => {
					if(res.data.status == 200) {
						this.traceTimeData = res.data.data||[];
						this.traceTimeData.unshift({text:'不限',value:''});
						
					}
				})
			},
			getBaseTypeList() {
				this.$http.get('/api/dictionary/data',{title:'demand_type'}).then((res) => {
					if(res.data.status == 200) {
						
						this.baseTypeList =res.data.data||[];
						
						console.log('basettttttt',this.baseTypeList)
						// this.baseTypeList.map((el)=>{el.text = el.title;el.value = el.id;return el})
						// this.baseTypeList.unshift({text:'不限',value:''});
					}
				})
			},
			openCustomTime(){
				this.maskVisible = true;
				this.startTime = '';
				this.endTime = '';
				this.startTimeStamp = 0;
				this.endTimeStamp = 0;
			},
			activeHandle(item,type){
				if(type == SORT) {
					return item.value === this.searchData['order']
				} else if (type == LEVEL) {
					return item.value === this.searchData['level']
				} else if(type == TRACE_TIME){
					return item.value === this.searchData['trace_time']
				} else if(type == INTEGRITY_SCORE){
					return item.value === this.searchData['integrity_score']
				} else if(type == CLIENT_PERSON){
					return item.value === this.searchData['user_id']
				}
				else if(type == AUTH){
					return item.value === this.searchData['access_authority']
				}else if(type == BASETYPE){
					if(this.searchData['demand__demand_type']&&item.value){
						return true;
					}
					if(!this.searchData['demand__demand_type']&&!item.value){
						return true;
					}
					return false;
					
				}else if(type == INDUSTRY){
					if(this.searchData['industry_id']&&item.value){
						return true;
					}
					if(!this.searchData['industry_id']&&!item.value){
						return true;
					}
					return false;
				}
			},
			selectSearch(item,type){
				
				if(type == SORT) {
					this.searchData['order'] = item.value;
				} else if (type == LEVEL) {
					
					this.searchData['level'] = item.value;
					
					
				} else if(type == TRACE_TIME){
					this.searchData['trace_time'] = item.value;
				} else if(type == INTEGRITY_SCORE){
					
						this.searchData['integrity_score'] = item.value;
					
				}else if(type == CLIENT_PERSON){
					
						this.searchData['user_id'] = item.value;
					
				}else if(type == AUTH){
					
						this.searchData['access_authority'] = item.value;
					
				}else if(type == BASETYPE){
					if(item.value !== '') {
						this.typeShow = true;
					} else {
						this.searchData['demand__demand_type'] = item.value;
						this.baseTypeDisplayData[1].text = '选择需求类型';
						this.baseTypeDisplayData[1].value = 'custom'
					}
				}else if(type == INDUSTRY){
					if(item.value !== '') {
						this.industyShow = true;
					} else {
						this.searchData['industry_id'] = item.value;
						this.searchData['industry_detail_id'] = item.value;
						this.industryDisplayData[1].text = '选择行业';
						this.industryDisplayData[1].value = 'custom'
					}
				}
				
				
			},
			openStartTime(){
				this.timeShow = true;
				this.timeRangeData = [[],[],[]];
				let yearData = [];
				let nowYear = new Date().getFullYear();
				let nowMonthIndex = new Date().getMonth();
				let nowDateIndex = new Date().getDate();
			
				for(let i = 1900; i <= nowYear; i++) {
					yearData.push({title:i});
				}
				this.$set(this.timeRangeData,0,yearData);
				
				// year = this.timeRangeData[column][index];
				let month = this.getMonthsInYear(nowYear);
				this.$set(this.timeRangeData,1,month);
				
				let days = []
				for(let i = 1; i<= month[nowMonthIndex].date; i++){
					days.push({title:i})
				}
				
				this.$set(this.timeRangeData,2,days);
				console.log('youduuuuuu',yearData.length - 1,nowMonthIndex,nowDateIndex - 1);
				this.initStartTime = [yearData.length - 1,nowMonthIndex,nowDateIndex - 1];
			},
			openEndTime(){
				this.endTimeShow = true;
				this.endTimeRangeData = [[],[],[]];
				let yearData = [];
				let nowYear = new Date().getFullYear();
				let nowMonthIndex = new Date().getMonth();
				let nowDateIndex = new Date().getDate();
							
				for(let i = 1900; i <= nowYear; i++) {
					yearData.push({title:i});
				}
				this.$set(this.endTimeRangeData,0,yearData);
				
				// year = this.timeRangeData[column][index];
				let month = this.getMonthsInYear(nowYear);
				this.$set(this.endTimeRangeData,1,month);
				
				let days = []
				for(let i = 1; i<= month[nowMonthIndex].date; i++){
					days.push({title:i})
				}
				
				this.$set(this.endTimeRangeData,2,days);
				console.log('youduuuuuu',yearData.length - 1,nowMonthIndex,nowDateIndex - 1);
				this.initEndTime = [yearData.length - 1,nowMonthIndex,nowDateIndex - 1];
			},
			customTimeConfirm(){
				if(!(this.startTime&&this.endTime)){
					this.$tip.toast('请选择日期')
					return;
				}
				if(this.endTimeStamp - this.startTimeStamp < 0){
					this.$tip.toast('结束时间应小于开始时间')
					return;
				}
				
				this.maskVisible = false;
				this.customTimeText = this.startTime +'-'+this.endTime;
				let startTime = new Date(this.startTimeStamp).Format('yyyy-MM-dd');
				let endTime = new Date(this.endTimeStamp).Format('yyyy-MM-dd');
				console.log('wwwwwwww',startTime,this.startTimeStamp)
				this.searchData['activity_time'] = startTime+' ' +endTime;
				
			},
			comfireSearch(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.searchData = this.searchData;
				console.log('filter11111111', this.searchData)
				
				this.$Router.back();
			},
			cancel(){
				for(let key of Object.keys(this.searchData)){
					this.searchData[key] = '';
				}
				this.industryDisplayData[1].text ='选择行业';
				this.baseTypeDisplayData[1].text = '选择需求类型';
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-field{
		padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
		background-color:#FFFFFF;
		.select-item{
			padding:30rpx;
			.title{
				color:#616571;
				font-size: 32rpx;
				font-weight: $Semibold;
				margin-bottom: 30rpx;
				line-height: 32rpx;
			}
			.select-item-body{
				display: grid;
				grid-row-gap: 30rpx;
			}
			.select-item-body-3{
				grid-column-gap: 16rpx;
				grid-template-columns: auto auto auto;
			}
			.select-item-body-4{
				grid-column-gap: 20rpx;
				grid-template-columns: auto auto auto auto;
			}
			.text-body{
				text-align: center;
				line-height: 72rpx;
				font-size: 24rpx;
				color:#6F6F6F;
				background-color: #F7F8FC;
				border-radius: 10rpx;
			}
			.text-body-3{
				
				width: 220rpx;
				height: 72rpx;
				
			}
			.text-body-4{
				
				width: 160rpx;
				height: 72rpx;
				
			}
			.active-style{
				border: 2rpx solid #FFA457;
				background-color: #FDF1E5;
				color: #EE8731;
			}
			.select-item-body-area-type{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				
				.area-type{
					flex:1;
					margin-left: 20rpx;
				}
			}
			.select-time{
				
					margin-top:30rpx;
				
			}
		}
		.footer{
			width: 100%;
			padding:10rpx 28rpx calc(env(safe-area-inset-bottom) + 30rpx) 30rpx ;
			// display: flex;
			position: fixed;
			bottom: 0;
			background: #FFFFFF;
			height: calc(112rpx + env(safe-area-inset-bottom));
			box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
			/deep/.tn-btn-class{
				vertical-align: middle;
			}
			.right-button{
				
				/deep/.tn-btn-class{
					margin-left: 20rpx;
					border: 2rpx solid #CACACA;
				}
			}
			
			
		}
	}
	.popup-field{
		padding:80rpx 60rpx 60rpx;
		.title{
			font-size: 40rpx;
			color:#616571;
			text-align: center;
			
		}
		.middle_field{
			padding:60rpx 0;
			color:#6F6F6F;
		}
		// .input{
			
		// 	width: 100%;
			/deep/.tn-input{
				border-radius: 10rpx;
				background-color: #F7F8FC;
			}
		// }
		.line{
			margin:0 26rpx;
			width:16rpx;
		}
		.footer{
			// padding:0 28rpx 0 30rpx;
			// display: flex;
			.right-button{
				/deep/.tn-btn-class{
					border:2rpx solid #CACACA!important;
					margin-left: 70rpx;
					
				}
			}
			
			
		}
	}
</style>
